<template>
    <div class="sjzxLeftHistoryDisaster">
        <div class="listTitle">历史生产安全事故统计分析</div>
        <Title titles="市县统计" />
        <div id="historyFireChart1"></div>
        <Title titles="事故等级统计" />
        <div id="historyFireChart2"></div>
        <Title titles="行业统计" />
        <div id="historyFireChart3"></div>
        <Title titles="按月统计" />
        <div id="historyFireChart4"></div>
    </div>
</template>

<script>
import { onMounted, ref } from "vue";
import Title from "../LittleTitle.vue";
import echarts from "echarts";
import axios from "axios";
export default {
    components: {
        Title,
    },
    setup() {
        let inputValue = ref("");
        let currentPage = ref(1);

        const drawChart1 = (element, xData, yData) => {
            let dom = document.getElementById(element);
            let myChart = echarts.init(dom);
            let option = {
                grid: {
                    left: "13%",
                    right: "2%",
                    top: "19%",
                    bottom: "50%",
                },
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    data: xData,
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                        rotate: 45,
                    },
                },
                yAxis: {
                    name: "单位:次",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 14,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#2d3d53",
                        },
                    },
                    //interval:1000,
                },
                series: [
                    {
                        type: "bar",
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#5ef3ff",
                                        },
                                        {
                                            offset: 1,
                                            color: "#06a4f4",
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                fontSize: 14,
                                fontWeight: "bold",
                                color: "#ffffff",
                                position: "top",
                            },
                        },
                        data: yData,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        };
        const drawChart2 = (element, xData, yData) => {
            let dom = document.getElementById(element);
            let myChart = echarts.init(dom);
            let option = {
                grid: {
                    left: "15%",
                    right: "2%",
                    top: "22%",
                    bottom: "35%",
                },
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    data: xData,
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                        rotate: 45,
                    },
                },
                yAxis: {
                    name: "单位:次",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 14,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#2d3d53",
                        },
                    },
                    //interval:1000,
                },
                series: [
                    {
                        type: "bar",
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#5ef3ff",
                                        },
                                        {
                                            offset: 1,
                                            color: "#06a4f4",
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                fontSize: 14,
                                fontWeight: "bold",
                                color: "#ffffff",
                                position: "top",
                            },
                        },
                        data: yData,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        };
        const drawChart3 = (element, xData, yData) => {
            let dom = document.getElementById(element);
            let myChart = echarts.init(dom);
            let option = {
                grid: {
                    left: "15%",
                    right: "2%",
                    top: "21%",
                    bottom: "50%",
                },
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    data: xData,
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                        rotate: 45,
                    },
                },
                yAxis: {
                    name: "单位:次",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 14,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#2d3d53",
                        },
                    },
                    interval:5000,
                },
                series: [
                    {
                        type: "bar",
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#5ef3ff",
                                        },
                                        {
                                            offset: 1,
                                            color: "#06a4f4",
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                fontSize: 14,
                                fontWeight: "bold",
                                color: "#ffffff",
                                position: "top",
                            },
                        },
                        data: yData,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        };
       
        // 可缩放
        const drawChartZoom = (element, xData, yData) => {
            let year = new Date().getFullYear()
            let dom = document.getElementById(element);
            let myChart = echarts.init(dom);
            let option = {
                grid: {
                    left: "15%",
                    right: "2%",
                    top: "20%",
                    bottom: "35%",
                },
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    data: xData,
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                        rotate: 45,
                    },
                },
                yAxis: {
                    name: "单位:次",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 14,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#2d3d53",
                        },
                    },
                    //interval:1000,
                },
                dataZoom: [
                    {
                        type:'inside',//slider表示有滑动块的，inside表示内置的
                        show:true,
                        xAxisIndex:[0],
                        startValue:`${year}-01`,
                        end:100,
                    }
                ],
                series: [
                    {
                        type: "line",
                        //barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#5ef3ff",
                                        },
                                        {
                                            offset: 1,
                                            color: "#06a4f4",
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                fontSize: 14,
                                fontWeight: "bold",
                                color: "#ffffff",
                                position: "top",
                            },
                        },
                        smooth: true,
                        data: yData,
                    },
                ],
            };
            var zoomSize = 6;
            myChart.on('click', function (params) {
                console.log(xData[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                myChart.dispatchAction({
                    type: 'dataZoom',
                    startValue: xData[Math.max(params.dataIndex - zoomSize / 2, 0)],
                    endValue: xData[Math.min(params.dataIndex + zoomSize / 2, yData.length - 1)]
                });
            });
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        };

        onMounted(() => {
            //行政区统计
            axios
                .get(
                    `${sjzxUrl}/api/safeProductDisaster/xzqhStat`
                )
                .then((res) => {
                    console.log(res.data.data)
                    let vData = res.data.data;
                    let xData = vData.map((item) => {
                        if(item){
                            return item.statTarget;
                        }
                    });
                    let yData = vData.map((item) => {
                        if(item){
                            return item.num;
                        }
                    });
                    drawChart1("historyFireChart1", xData, yData);
                });
            //事故等级查询
            axios.get(`${sjzxUrl}/api/safeProductDisaster/accidentLevelStat`).then((res) => {
                    let vData = res.data.data;
                    let xData = vData.map((item) => {
                        return item.accident_level;
                    });
                    let yData = vData.map((item) => {
                        return item.num;
                    });
                    drawChart2("historyFireChart2", xData, yData);
                });
            axios.post( `${sjzxUrl}/api/safeProductDisaster/statIndustryCategory`, {} ).then(res=>{
                let vData = res.data.data;
                let xData = vData.map((item) => {
                    return item.statTarget;
                });
                let yData = vData.map((item) => {
                    return item.num;
                });
                drawChart3("historyFireChart3", xData, yData);
            })
            axios.post( `${sjzxUrl}/api/safeProductDisaster/statTrendByMonth`, {} ).then(res=>{
                let vData = res.data.data;
                let xData = vData.map((item) => {
                    return item.statTarget;
                });
                let yData = vData.map((item) => {
                    return item.num;
                });
                drawChartZoom("historyFireChart4", xData, yData);
            })
        });
        return {
            inputValue,
            currentPage,
        };
    },
};
</script>
<style scoped>
.dataList::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.dataList::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
}
.dataList::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
}
</style>
<style>
.sjzxLeftHistoryDisaster .el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
    color: #000;
}
</style>
<style lang="stylus" >
 ;

.sjzxLeftHistoryDisaster {
    color: #fff;
    width:vw(400)
    padding:vh(15) vw(15)
    .listTitle {
        width: 100%;
        height: vh(40);
        line-height: vh(40);
        font-size: vw(16);
        text-align: center;
        margin-bottom: vh(20);
    }
    .resultNum {
        margin-top: vh(10);
        margin-bottom: vh(10);
    }

    .exportExcel {
        width: vw(100);
        height: vh(30);
        line-height: vh(30);
        border: 1px solid #00EAFF;
        text-align: center;
        border-radius: 3px;
        float: right;
        margin-top: vh(10);
    }

    .el-input__inner {
        background: transparent;
        border: 1px solid #00E5FD;
    }

    .el-input-group__append, .el-input-group__prepend {
        background: transparent;
        border: 1px solid #00E5FD;
    }

    #historyFireChart1 {
        width: vw(370);
        height: vh(220);
        margin-bottom:vh(15)
    }

    #historyFireChart2 {
        width: vw(370);
        height: vh(170);
        margin-bottom:vh(15)
    }

    #historyFireChart3 {
        width: vw(370);
        height: vh(170);
        margin-bottom:vh(15)
    }

    #historyFireChart4 {
        width: vw(370);
        height: vh(200);
    }

    .dataList {
        height: vh(640);
        overflow-y: scroll;
        margin-bottom: vh(20);

        .dataListItem {
            padding-bottom: vh(10);
            padding-top: vh(10);
            border-bottom: 1px solid #ddd;

            .itemTop {
                .order {
                    display: inline-block;
                    min-width: vw(20);
                    height: vh(20);
                    margin-right: vw(10);
                    text-align: center;
                    background: #00EAFF;
                    font-size: vw(16);
                    line-height: vh(20);
                }

                .itemName {
                    font-size: vw(16);
                    height: vh(20);
                    line-height: vh(20);
                }
            }

            .link {
                .linkPro {
                    font-size: vw(14);
                    height: vh(18);
                    line-height: vh(18);
                }

                .linkContent {
                    font-size: vw(14);
                    height: vh(18);
                    line-height: vh(18);
                }
            }

            .itemBottom {
                .locationIcon {
                    color: #00EAFF;
                    font-size: vw(14);
                    height: vh(18);
                    line-height: vh(18);
                }

                .location {
                    color: #00EAFF;
                    font-size: vw(14);
                    height: vh(18);
                    line-height: vh(18);
                }
            }
        }
    }
}
</style>